<template>
  <div class="select">
    <span class="fs-14 mr-8 cr-white bold" style="flex-shrink: 0" v-if="title">
      <slot />
    </span>
    <el-select
      :placeholder="placeholder"
      class="selectT"
      @change="changeValue"
      :value="value"
    >
      <el-option
        v-for="item in selectArr"
        :key="keys.length > 0 ? item[keys] : item.value"
        :label="label.length > 0 ? item[label] : item.value"
        :value="valueKey.length > 0 ? item[valueKey] : item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "selectName",
  props: {
    selectArr: {
      type: Array,
      default: () => {},
    },
    keys: {
      type: String,
      default: "",
    },
    label: {
      type: String,
      default: "",
    },
    valueKey: {
      type: String,
      default: "",
    },
    title: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    value: {
      type: [String, Number],
      default: "",
    },
  },
  methods: {
    changeValue(val) {
      this.$emit("dropDown", val);
    },
  },
};
</script>

<style lang="scss" scoped>

.select {
  display: flex;
  align-items: center;
  .selectT {
    // width: 110px;
  }
  ::v-deep.el-input--suffix .el-input__inner {
    // height: 26px;
    // line-height: 26px;
    background-color: #fff;
  }

  ::v-deep.el-input__icon {
    line-height: 100%;
    top: 3px;
  }
  /deep/.el-input__suffix {
    top: 2px;
  }
}
</style>